/*
 * @Author: 
 * @Date: 2022-01-27 10:30:55
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-18 16:16:30
 * @Description: 请填写简介
 */
import React, { Component } from 'react';
// import axios from 'axios'
import PubSub from 'pubsub-js'
import {Input, Button} from 'antd'

class Search extends Component {
  handleSearch = async () => {
    const { keyWord: { value }} = this
    if (value.trim() === '') return
    PubSub.publish('initState', { isFirst: false, isLoad: true })
    try {
      const res = await fetch(`/api1/search/users?q=${value}`)
      const result = await res.json()
      PubSub.publish('initState', { isLoad: false, searchList: result.items })
      // console.log(result)
    } catch (error) {
      PubSub.publish('initState', { isLoad: false, isError: error.message })
      // console.log(error)
    }

    // fetch(`/api1/search/users?q=${value}`)
    //   .then(
    //     res => {
    //       console.log(res)
    //       return res.json()
    //     }
    //   )
    //   .then(
    //     res => {
    //       console.log(res.items)
    //       PubSub.publish('initState', { isLoad: false, searchList: res.items })
    //     }
    //   )
    //   .catch(err => {
    //     PubSub.publish('initState', { isLoad: false, isError: err.message })
    //     // return new Promise(() => { })
    //   })

    // axios.get(`/api1/search/users2?q=${value}`)
    //   .then(
    //     res => {
    //       console.log(res.data.items)
    //       if (res.status !== 200) return
    //       PubSub.publish('initState', { isLoad: false, searchList: res.data.items })
    //     },
    //     err => {
    //       PubSub.publish('initState', { isLoad: false, isError: err.message })
    //     }
    //   )
  }
  render() {
    return (
      <div className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div style={{display: 'flex'}}>
          <Input ref={c => this.keyWord = c} type="text" placeholder="enter the name you search" />&nbsp;
          <Button onClick={this.handleSearch}>Search</Button>
        </div>
      </div>
    );
  }
}

export default Search;
